<template>
	<view class="padding">
		<view class="text-white padding bg radius">
			<view style="font-size: 1px;color: crimson;">*为必填项！</view>
			<u-form :model="user" ref="uForm" label-position="top" :label-style='lableStyle'>
				<!-- 用户头像（不可修改） -->
				<u-form-item label="头像" :border-bottom='false'>
					<view class="bg nav text-white">
						<u-avatar :src="avr" mode="square"></u-avatar>
					</view>
				</u-form-item>
				<!-- 用户昵称（可修改） -->
				<u-form-item label="昵称*" :border-bottom='false'>
					<u-input v-model="user.nick" />
				</u-form-item>
				<!-- 用户性别（不可修改） -->
				<u-form-item label="性别" :border-bottom='false'>
					<view class="bg nav text-white">
						{{user.gender}}
					</view>
				</u-form-item>
				<!-- 用户生日（不可修改） -->
				<u-form-item label="生日" :border-bottom='false'>
					<view class="bg nav text-white">
						{{user.birthday}}
					</view>
				</u-form-item>
				<!-- 个性签名（可修改） -->
				<u-form-item label="个性签名*" :border-bottom='false'>
					<u-input v-model="user.signature" />
				</u-form-item>
				<!-- 上传用户图片 -->
				<u-form-item label="上传图片*">
					<!-- <u-input v-model="form.name" /> -->
					<uni-file-picker limit="4" @select="selectFile" @delete="deleteFile" v-model="imgList">
					</uni-file-picker>
				</u-form-item>
			</u-form>
		</view>
		<button type="primary" class="btn1" @click="updateAuth">提交认证</button>
		<!-- <u-button class="margin-top" :custom-style="customStyle" shape="circle" :hair-line="false">提交认证</u-button> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 用户头像
				avr: "",
				user: {
					nick: '',
					signature: '',
					id:'',
				},
				id:'',
				imgList: [],
				// 虚拟url与真实url的映射数组
				urlMapping: [],
				urlMap: {
					// 虚拟url
					url: "",
					// Oss上存储的路径
					realurl: "",
				},
				lableStyle: {
					color: '#FFFFFF',
					fontSize: '36upx'
				},
				customStyle: {
					backgroundColor: '#2087FE',
					color: '#FFFFFF',
					border: 0
				}
			}
		},
		onLoad() {
			this.id = uni.getStorageSync('userId');
			this.$myRequest({
				url: '/user/byId',
				data: {
					// 用户id
					id: this.id
				},
				method: "get",
			}).then(r => {
				console.log(r);
				this.user = r.data.data;
				this.avr = r.data.data.avr;
			})
		},
		methods: {
			// console.log(e.tempFilePaths[0]);
			// console.log("选择文件");
			selectFile(e) {
				uni.uploadFile({
					url: "http://localhost:8080/upload",
					filePath: e.tempFilePaths[0],
					name: "file",
					success: (r => {
						// 转成json格式
						let result = JSON.parse(r.data);
						//console.log(result);
						this.imgList.push(result.data);
						this.urlMap.url = e.tempFilePaths[0];
						this.urlMap.realurl = result.data;
						this.urlMapping.push(this.urlMap);
						console.log("imgList", this.imgList);
						uni.showToast({
							title: "上传成功",
							icon: "none",
						});
					})
				});
			},
			deleteFile(e) {
				let toDelUrl = "";
				// 根绝虚拟url删除真实url
				for (let urlMap of this.urlMapping) {
					if (urlMap.url == e.tempFilePath) {
						toDelUrl = urlMap.url;
						this.user.imgSrc.splice(this.user.imgSrc.indexOf(toDelUrl), 1)
						break;
					}
				}
				//console.log(this.user.imgSrc);
				uni.showToast({
					title: "删除成功",
					icon: "none",
				});
			},
			updateAuth() {
				uni.request({
					url: "http://localhost:8080/user/authPw/submit",
					method: "POST",
					data: {
						user: {
							// 用户id
							id: this.id,
							// 用户昵称
							nick: this.user.nick,
							// 用户个性签名
							signature: this.user.signatureL
						},
						imgList: this.imgList
					},
					success: (res) => {
						if (res.data.code == 200) {
							uni.showToast({
								title: "申请成功",
								icon: "none"
							})
							setTimeout(function() {
								uni.switchTab({
									url: "/pages/my/index",
									success(res) {
										console.log("成功跳转",res);
									},
									fail(res) {
										console.log("失败跳转",res);
									}
								})
							}, 2000);
						} else {
							uni.showToast({
								title: res.data.message,
								icon: "none",
							})
						}
					}
				})
			}
		}
	}
</script>

<style>
	.bg {
		background-color: #1E1F31;
	}
</style>
